<template>
	<div class="page-container detail-container">
		<div style="width: 600px; margin: 0 auto;">
			<el-row :gutter="20">
				<el-col :span="12">
					品牌ID
					<span class="detail-value">{{detailData.id}}</span>
				</el-col>
				<el-col :span="12">
					品牌名称
					<span class="detail-value">{{detailData.name}}</span>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="12">
					状态
					<span class="detail-value">{{detailData.disabled ? '禁用' : '启用'}}</span>
				</el-col>
				<el-col :span="12">
					站点数量
					<span class="detail-value">{{detailData.amount || 0}}</span>
				</el-col>
			</el-row>
		</div>
		<div class="detail-toolbar">
			<el-button size="small" @click="cancel">取消</el-button>
		</div>
	</div>
</template>

<script>
import {brandDetail} from '@/api/brand'
export default {
  name: "BrandDetail",
  data() {
    return {
      detailData: {amount: 0}
    }
  },
  methods: {
    async requestDetail(id) {
      try {
        const {data} = await brandDetail(id)
        if (data) {
          this.detailData = { ...this.detailData, ...data}
        } else {
          this.cancel();
        }
      } catch(err) {
        this.cancel();
      }
    },
    cancel() {
      this.$router.go(-1)
    }
  },
  created() {
    let {id} = this.$route.params;
    if (id) {
      this.requestDetail(id);
    } else {
      this.cancel();
    }
  }
};
</script>

<style lang="scss" scoped>
.page-container.detail-container{
  margin: 0;
  padding: 40px 0 0 0;
}
</style>